﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DesktopConfig.aspx.cs" Inherits="ZX.WebApp.DeskTop.Form.DesktopConfig" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>桌面设置</title>

    <link href="styles/css.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/CustomFunction.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script src="../../KM/FullTextSearch/Script/CommonJS.js" type="text/javascript"></script>

    <script type="text/javascript">

        var FromAction, ModelName, sort, RoleID, RoleDesktopID;
        var ID = "<%=FormID %>";
        var _tabID = 0;
        var custom_clum_right = $(".custom_clum_right"); //右边容器
        var tools = ""; //tools = { content: "<ul id='ul_" + id + "'><li class='tab'>测试1</li><li class='tab ul_li_active'>测试2</li></ul>", functionName: "test1" };
        var data = []; //var data = { id: "test" + i, title: "我是标题" + i, src: "", tools: tools, isiframe: true };

        //  ID： clum_tools_reload_+ id  刷新按钮
        var refreshBtn_Html = "<li class='ul_li_buttons refresh' style='width:25px;'><img class='clum_tools_reload' src='styles/images/refresh.png' /></li>";
        //  ID：clum_tools_more_+id      更多按钮
        var moreBtn_Html = "<li class='ul_li_buttons more' style='width:45px;color:#6CA6CD;'><a class='clum_tools_more' >更多..<a/></li>";
        //空Tab
        var emptyTab = "<li TabUrl='' TabPro='' TabFunction='' MoreUrl='' class='tab ul_li_active'>Tab模板</li>";

        $(function () {
            _tabID = 0;
            var tempID = getQueryStringByName("ID");
            if (tempID != "") ID = tempID; //DeskTopTempID
            FromAction = getQueryStringByName("Action");
            RoleDesktopID = getQueryStringByName("RoleDesktopID");
            RoleID = getQueryStringByName("RoleID");
            sort = getQueryStringByName("sort");

            custom_clum_right = $(".custom_clum_right"); //右边容器
            tools.content = $(".clum_tools").html();

            //刷新、更多checkbox
            $("#cbMore,#cbRefresh").click(function () {
                panduan();
            });

            //删除选项卡
            $("#btnDeleteTab").click(function () {
                var removeTabObj = $(".ul_li_active");
                removeTabObj.remove();
                nextTabObj = $($(".tab")[0]);
                nextTabObj.addClass("ul_li_active");
                getTabPro();

                if ($(".tab").length <= 0) {
                    $("#btnDeleteTab").hide();
                    $("#div_tab").hide();
                    $("#div_url").show();
                } else {
                    $("#btnDeleteTab").show();
                    $("#div_tab").show();
                    $("#div_url").hide();
                }
            });

            //添加选项卡
            $("#btnAddTab").click(function () {
                setTabPro();
                $("#btnDeleteTab").show();
                var tabCount = $(".tab").length;
                if (tabCount > 2) { alert("Tab页超过限制数量"); return; }
                var temp = $(".clum_tools");
                var tabID = "tab_" + ID + "$" + _tabID;
                var currentEmptyTab = $(emptyTab);
                $(".tab").removeClass("ul_li_active");
                currentEmptyTab.addClass("ul_li_active");
                currentEmptyTab.attr("id", tabID);
                var liCount = temp.find("li").length;
                if (liCount > 0) currentEmptyTab.insertBefore(temp.find("li:first"));
                else temp.find("ul").append(currentEmptyTab);
                tools.content = $(".clum_tools").html();
                _tabID++;
                $("#div_tab").show();
                $("#moreUrlP").show();
                $("#div_url").hide();
                getTabPro();
            });

            //动态注册tab按钮事件
            $(".tab").live("click", function () {
                changeTab($(this));
            });

            loadTabData();
        });

        //加载数据
        var loadTabData = function () {
            //" + FromAction + 
            $.getJSON("DesktopConfig.aspx?Action=LoadData&ID=" + ID + "&RoleID=" + RoleID + "&r=" + Math.random(), function (data) {

                var temp = $(".clum_tools");
                if (data.tools != "") {
                    temp.find("ul").append(data.tools);
                    getTabPro();
                }

                $("#txtTitle").val(data.title);
                $("#powerTypeSelect").val(data.powerType);
                $("#showPageType").val(data.pageType);
                $("#selRegion").val(data.Region);
                $("#txtUrl").val(data.src);

                var isRefresh = temp.find(".clum_tools_reload"); //是否已经存在刷新按钮
                var isMore = temp.find(".clum_tools_more");      //是否已经存在更多按钮

                var ckRefresh = false, ckMore = false;
                if (isRefresh.length > 0) {
                    ckRefresh = true;
                }
                if (isMore.length > 0) {
                    ckMore = true;
                    $("#moreUrlP").show();
                } else {
                    $("#moreUrlP").show();
                }

                $("#cbRefresh").attr("checked", ckRefresh);
                $("#cbMore").attr("checked", ckMore);

                if (temp.find(".tab").length > 0) {
                    var ac = temp.find(".ul_li_active");
                    $("#div_tab").show();
                    $("#div_url").hide();
                    $("#btnDeleteTab").show();
                    $("#txtMore2").val(ac.attr("MoreUrl"));
                } else {
                    $("#div_tab").hide();
                    $("#div_url").show();
                    $("#btnDeleteTab").hide();
                    $("#div_url").val(data.src);
                    $("#txtMore1").val(data.more);
                }
            });
        };

        //设置Tab属性
        var setTabPro = function () {
            var tname = $("#txtTabName").val();
            var turl = $("#txtTabUrl").val();
            var tpro = $("#txtTabPro").val();
            var tfun = $("#txtTabFunction").val();
            var more = $("#txtMore2").val();

            var currentTab = $(".ul_li_active");
            currentTab.html(tname);
            currentTab.attr("TabUrl", turl);
            currentTab.attr("TabPro", tpro);
            currentTab.attr("TabFunction", tfun);
            currentTab.attr("MoreUrl", more);
        };
        //获取Tab属性
        var getTabPro = function () {
            var currentTab = $(".ul_li_active");
            var title = currentTab.html();
            var url = currentTab.attr("TabUrl");
            var pro = currentTab.attr("TabPro");
            var fun = currentTab.attr("TabFunction");
            var more = currentTab.attr("MoreUrl");

            title = title == null ? "" : title;
            url = url == null ? "" : url;
            pro = pro == null ? "" : pro;
            fun = fun == null ? "" : fun;
            more = more == null ? "" : more;

            $("#txtTabName").val(title);
            $("#txtTabUrl").val(url);
            $("#txtTabPro").val(pro);
            $("#txtTabFunction").val(fun);
            $("#txtMore2").val(more);
        };

        //tab切换事件，更改tab焦点
        var changeTab = function (event, tabFunctionName) {
            setTabPro();
            event.parent().find("li").each(function () {
                $(this).removeClass("ul_li_active");
            })
            event.addClass("ul_li_active");
            var fun = event.attr("TabFunction");
            getTabPro();
            if (fun == null || fun == undefined || fun == "") return;

            //异常捕获，如果该函数未定义，则报错。 //执行自定义tab事件
            try { window[fun](event); }
            catch (e) { alert("自定义函数有问题，检查是否已经定义了改函数"); }
        };

        //对刷新按钮与更多按钮的新增与移除
        var panduan = function () {
            var canRefresh = $("#cbRefresh").attr("checked");   //判断刷新选中状态
            var canMore = $("#cbMore").attr("checked");         //判断更多选中状态

            var temp = $(".clum_tools");
            var isRefresh = temp.find(".clum_tools_reload"); //是否已经存在刷新按钮
            var isMore = temp.find(".clum_tools_more");      //是否已经存在更多按钮

            if (canMore) {
                $("#moreUrlP").show();
                if (isMore.length == 0) {
                    if (isRefresh.length > 0) {
                        $(moreBtn_Html).insertAfter($(".refresh"));
                    } else {
                        var tabs = $(".tab").length;
                        if (tabs > 0) $(moreBtn_Html).insertAfter($(".tab:last"));
                        else temp.find("ul").append($(moreBtn_Html));
                    }
                }
            } else {
                $("#moreUrlP").show();
                $(".more").remove();
            }

            if (canRefresh) {
                if (isRefresh.length == 0) {
                    if (isMore.length > 0) {
                        $(refreshBtn_Html).insertBefore($(".more"));
                    }
                    else {
                        var tabs = $(".tab").length;
                        if (tabs > 0) $(refreshBtn_Html).insertAfter($(".tab:last"));
                        else temp.find("ul").append($(refreshBtn_Html));
                    }
                }
            } else {
                $(".refresh").remove();
            }
            tools.content = $(".clum_tools").html();
        };

        //保存
        var Modify = function () {
            setTabPro();
            var temp = $(".clum_tools");
            tools = temp.find("ul").html();
            var tool_btn = $(tools);
            var ckSrc = true;
            var canSend = true;
            var tempName = "";
            $.each(tool_btn, function (c, q) {
                ckSrc = false;
                var cobj = $(q);
                if (cobj.hasClass("tab")) {
                    var turl = cobj.attr("TabUrl");
                    if (turl == "") {
                        canSend = false;
                        tempName = cobj.html();
                    }
                }
            });

            if (!canSend) {
                alert(tempName + "：配置路径不能为空");
                return -1;
            }

            tools = escape(tools);
            var title = $("#txtTitle").val();
            var powerType = $("#powerTypeSelect").val();
            var pageType = $("#showPageType").val();
            var region = $("#selRegion").val();

            var src = $("#txtUrl").val();
            if (ckSrc) {
                if (src == "") {
                    alert("配置路径不能为空");
                    return -1;
                }
            }

            var more = "";
            if ($(".tab").length > 0) more = $("#txtMore2").val();
            else more = $("#txtMore1").val();

            data = { id: ID, title: title, powerType: powerType, pageType: pageType, src: src, tools: tools, roleid: RoleID, RoleDesktopID: RoleDesktopID, sort: sort, Region: region, more: more };
            data = JSON2.stringify(data);
            data = escape(data);

            var url = "DesktopConfig.aspx?Action=savedata&_Action=" + FromAction + "&RoleID=" + RoleID + "&mydata=" + data + "&r=" + Math.random();
            $.ajax({
                type: "post",
                url: url,
                data: [],
                async: false,
                success: function (data) { ic = true; }
            });

            data = unescape(data);
            data = JSON2.parse(data);
            data.tools = unescape(data.tools);
            return data;
        };
    </script>

</head>

<body style="overflow:hidden;">
    <form id="form1" runat="server">

    <div style="margin:5px;">
        <div class="custom_clum_right" style="width: 100%;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="top"><img src="styles/images/load_bk_left.png" /></td>
                        <td valign="top" class="clum_big_center">
                            <div class="load_title">
                                <span class="paneltitle" style="float:left;">
                                    <input id="txtTitle" type="text" style="width:100px; margin-top:5px; *margin-top:1px;" value="输入标题" />

                                    <select id="powerTypeSelect">
                                        <option value="1" selected="selected">权限</option>
                                        <option value="0">无权限</option>
                                    </select>
                                    &nbsp;
                                    <select id="showPageType">
                                        <option value="0">Div</option>
                                        <option value="1">页面</option>
                                    </select>
                                    &nbsp;
                                    <select id="selRegion">
                                        <option value="center" selected="selected">居左</option>
                                        <option value="right">居右</option>
                                    </select>
                                    &nbsp;
                                    <input type="checkbox" id="cbRefresh" />刷新
                                    <input type="checkbox" id="cbMore" />更多
                                </span>
                                <div class="clum_tools">
                                    <ul></ul>
                                </div>
                            </div>

                            <p style="text-align:right;">
                                <a href="javascript:void(0)" id="btnAddTab">添加Tab</a>
                                <a href="javascript:void(0)" id="btnDeleteTab" style="display:none;">删除Tab</a>
                            </p>

                            <div id="div_url" style="text-align:center;">
                                <p style="padding-top:40px;"><label>链&nbsp;接&nbsp;URL：</label><input type="text" ID="txtUrl" style="width:560px;"/></p>
                                <p><label>更&nbsp;多&nbsp;URL：</label><input type="text" ID="txtMore1" style="width:560px;"/></p>
                            </div>
                            <div style="clear:both;"></div>
                            <div id="div_tab" style="text-align:left; margin-left:80px; padding-left:40px; display:none; margin-top:-10px;">
                                <p id="moreUrlP"><label>更&nbsp;多&nbsp;URL&nbsp;&nbsp;：</label><input type="text" ID="txtMore2" /></p>
                                <p><label>选项卡名称：</label><input type="text" ID="txtTabName" runat="server" /><span>选项卡名称不能为空</span></p>
                                <p><label>选项卡URL：</label><input type="text" ID="txtTabUrl" runat="server" /><span>指定 选项卡链接的Url地址，不能为空</span></p>
                                <p><label>选项卡参数：</label><input type="text" ID="txtTabPro" runat="server" /><span>给选项卡Url传入参数，可为空</span></p>
                                <p><label>自定义函数：</label><input type="text" ID="txtTabFunction" runat="server" /><span>定义function函数名(脚本写入CustomFunctionJS.js)</span></p>
                                <p style="padding-left:85px;">
                                    <label id="lblMsg" style="color:Red; font-size:9pt;">&nbsp;用户在自定义面板，面板显示在右边，选项卡只显示前两个刷新、更多按钮不会显示。</label>
                                </p>
                            </div>
                        </td>
                        <td valign="top"><img src="styles/images/load_bk_right.png" /></td>
                    </tr>
                </table>
                <p style="text-align:right;"><input type="button" id="btnSaveAll" style="display:none;" value="保存表单" /></p>
            </div>
        </div>
    </form>
</body>
</html>
